<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开关灯</title>
		<style>
		div{
			padding-left: 120px;
		}
		</style>
	</head>
	<body>
		
			<img src="img/off.png" width="300px" height="350px" id="img1" onclick="fun()">
			<p style="margin-left: 105px;">点击可以开关灯！！</p>
			<div id="div1">
				灯灭了！！
			</div>

		<script>
		var flag=false;
		var fun = function(){
			var img1=document.getElementById("img1");
			if(flag){
				img1.setAttribute("src","img/off.png");
				document.getElementById("div1").setAttribute("style","color: black;");
				document.getElementById("div1").innerHTML="灯灭了";
				flag=!flag;
			}else{
				img1.setAttribute("src","img/on.png");
				document.getElementById("div1").setAttribute("style","color: red;");
				document.getElementById("div1").innerHTML="灯亮了";
				flag=!flag;
			}
		}
	
		</script>
		
	</body>
</html>
